<div id="player">
  <div class="controls">
      <button id="play-pause" class="btn" (click)="toggle()">
        <i class="fa" [ngClass]="{'fa-play':!isPlaying,'fa-pause': isPlaying}"></i>
      </button>
      <button type="button" class="btn" (click)="restart()">
          <i class="fa fa-repeat" aria-hidden="true"></i>
      </button>
      <input id="position-slider" type="range" [(ngModel)]="percent" [attr.max]="max" (mouseup)="runFrom()">
      <span id="position">{{ position }}</span>
      <span>/</span>
      <span id="duration">{{ duration }}</span>
  </div>
  <div id="display" (click)="toggle()">
      <div class="notification-container">
          <div class="seek-notification">
              <p>
                  Seek in progress...
                  <button id="cancel-seek" class="btn" (click)="cancelSeek($event)">Cancel</button>
              </p>
          </div>
      </div>
  </div>
</div>
